<template>
	<gui-page ref="guipage" :fullPage="true" :apiLoadingStatus="apiLoadingStatus" :refresh="isHideTabbar"
		@reload="reload" :loadmore="isHideTabbar" @loadmorefun="loadData">
		<template v-slot:gFixedTop>
			<gui-a-header :title="headerTitle"></gui-a-header>
			<view class="bgfff" id="header">
				<view class="search flex-ac-jb">
					<view class="flex1">
						<gui-search2 :customClass="['bgfff','border']" :kwd="queryData.postName" @confirm="confirm"
							@clear="clear" @inputting="inputting" height="53rpx" placeholder="输入关键字，搜索您想要的"
							placeholderClass="plStyle"></gui-search2>
					</view>
					<button class="saveBtn" @click="showScreen">筛选</button>
				</view>
				<view class="shai flex-ac-row f20">
					<text class="la">已选条件：</text>
					<text class="la c999" v-if="queryShow.length <= 0">请选择</text>
					<scroll-view :scroll-x="true" class="gui-flex1" style="overflow: hidden;">
						<view class="row gui-flex">
							<view class="label-item colorBlue" v-for="(item,index) in queryShow" :key="item.dictValue">
								{{item.dictLabel}}
							</view>
						</view>
					</scroll-view>
					<view class="tool colorRed flex-ac-row" @tap="clearCheck">
						<text class="tool-text">清除</text>
						<text class="tool-text">重新筛选</text>
					</view>
				</view>
			</view>
		</template>
		<template v-slot:gBody>
			<view class="pos">
				<ScreenCom v-if="screenComShow" @change="queryChange" @confirm="confirmQuery" :mainHeight="mainHeight"
					ref="screenComRef">
				</ScreenCom>
			</view>
			<view class="deliver-list bgfff">
				<gui-empty v-if="noData">
					<template v-slot:img>
						<view class="gui-flex gui-rows gui-justify-content-center">
							<image class="nodata-img" src="../../static/image/no_curriculum_vitae.png" mode="widthFix">
							</image>
						</view>
					</template>
					<template v-slot:text>
						<text class="gui-text-small gui-block gui-text-center gui-margin-top gui-color-gray">暂无数据</text>
						<view class="zw" style="height: 200rpx;"></view>
					</template>
				</gui-empty>
				<view class="deliver-item gui-flex gui-align-items-start" v-for="(item,index) in dataList"
					:key="item.id">
					<view class="photo">
						<gui-image :src="item.userImg" :width="115" :height="115" borderRadius="60rpx"
							mode="aspectFill"></gui-image>
						<image class="sex_img" v-if="item.userSex == '男'" src="../../static/image/man.png"
							mode="widthFix">
						</image>
						<image class="sex_img" v-else src="../../static/image/woman.png" mode="widthFix"></image>
					</view>
					<view class="info">
						<view class="f26 c333">
							{{item.userName}}
						</view>
						<view class="f22 stress mt10">
							期望地点：<text
								v-if="item.comUserJobHuntList && item.comUserJobHuntList.length > 0">{{item.comUserJobHuntList[0].addressName}}</text>
						</view>
						<view class="f22 c666 mt10">
							期望职位：<text
								v-if="item.comUserJobHuntList && item.comUserJobHuntList.length > 0">{{item.comUserJobHuntList[0].postName}}</text>
						</view>
						<view class="sgin gui-flex">
							<view class="sgin-item">
								{{item.userAge}}岁
							</view>
							<view class="sgin-item">
								{{item.workTime}}
							</view>
							<view class="sgin-item">
								{{item.education}}
							</view>
							<view class="sgin-item stress-warp" v-if="item.workStatus">
								{{item.workStatus}}
							</view>
						</view>
						<view class="btn_pos">
							<button class="show_btn f20 cfff"
								@click="$u.to(`/pages/mine/curriculumVitae/curriculum-vitae?type=firm&id=${item.id}`)">查看</button>
						</view>
					</view>
				</view>
			</view>
		</template>
	</gui-page>
</template>

<script setup>
	import graceJS from "@/Grace6/js/grace.js"
	import ScreenCom from '@/components/Screen-com/Screen-com.vue'
	import {
		ref,
		reactive,
		inject
	} from 'vue';
	const $u = reactive(inject('$u'))
	import {
		onLoad
	} from '@dcloudio/uni-app'

	import {
		storeToRefs
	} from 'pinia'
	import {
		useUserStore
	} from '@/stores/user.js'
	import {
		selectHeatUserFollowList,
		selectAllUserFollowList
	} from '@/api/company.js'
	const guipage = ref(null);
	const mainHeight = ref(200);
	const screenComRef = ref(null)
	const store = useUserStore()
	const screenComShow = ref(false)
	const {
		isHideTabbar,
		addressInfo
	} = storeToRefs(store)
	const headerTitle = ref('人才列表');
	const queryType = ref('hot');
	// 筛选条件回显
	const queryShow = ref([])
	const queryData = ref({
		pageNum: 1,
		pageSize: 10,
		industry: '',
		postName: '',
		addressName: '',
		workStatus: '',
		workTime: ''
	})

	const dataList = ref([])
	const noData = ref(false);

	const queryChange = (data) => {
		console.log(data.value);
		queryShow.value = data.value;
	}

	// 清除筛选
	const clearCheck = () => {
		screenComRef.value.clearCheck();
		queryData.value.industry = '';
		queryData.value.addressName = '';
		queryData.value.workStatus = '';
		queryData.value.workTime = '';
		reload();
	}

	const showScreen = () => {
		screenComRef.value.open()
	}

	// 搜索框输入
	const inputting = (e) => {
		queryData.value.postName = e;
	}
	// 搜索框确认
	const confirm = (e) => {
		console.log(e);
		queryData.value.postName = e;
		reload(false);
	}
	// 搜索清空
	const clear = (e) => {
		queryData.value.postName = '';
		reload(false);
	}

	const confirmQuery = () => {
		let addressName = [];
		let industry = [];
		let workTime = [];
		let workStatus = [];

		queryShow.value.forEach(item => {
			if (item.key == 'addressName') {
				addressName.push(item.dictValue)
			}
			if (item.key == 'industry') {
				industry.push(item.dictValue)
			}
			if (item.key == 'workTime') {
				workTime.push(item.dictValue)
			}
			if (item.key == 'workStatus') {
				workStatus.push(item.dictValue)
			}
		})
		queryData.value.industry = industry.join(',')
		queryData.value.addressName = addressName.join(',')
		queryData.value.workStatus = workStatus.join(',')
		queryData.value.workTime = workTime.join(',')
		reload();
	}

	setTimeout(() => {
		graceJS.getRefs(guipage, 0, (ref) => {
			ref.getDomSize('guiPageBody', (e) => {
				mainHeight.value = (e.height - uni.upx2px(10));
				screenComShow.value = true;
			});
		});
	}, 500)

	const reload = (isRelod = true) => {
		queryData.value.pageNum = 1;
		loadData(isRelod);
	}


	// 查询
	const loadData = (isReload) => {
		let queryParam = Object.assign(queryData.value, {})
		const request = (queryType.value == 'hot') ? selectHeatUserFollowList : selectAllUserFollowList;
		request(queryParam).then(res => {
			if (res.code == 200) {
				var resultArr = res.rows;
				let total = Math.ceil(res.total / queryParam.pageSize);
				if (queryParam.pageNum >= 2) {
					dataList.value = dataList.value.concat(resultArr);
					guipage.value.stoploadmore();
					if (queryParam.pageNum >= total) {
						guipage.value.nomore();
					}
				}
				else {
					dataList.value = [];
					dataList.value = resultArr;
					if (isReload) {
						guipage.value.endReload();
					} else {
						guipage.value.stoploadmore();
					}
					(resultArr.length <= 0) ? noData.value = true: noData.value = false;
				}
				queryData.value.pageNum++;
			}
		})
	}

	onLoad((option) => {
		if (option.type == 'hot') {
			headerTitle.value = "热门人才"
		} else if (option.type == 'area') {
			headerTitle.value = "附近人才"
			if (addressInfo.value.district) {
				queryData.value.addressName = addressInfo.value.district
				queryShow.value.push({
					dictLabel: addressInfo.value.district,
					key: "addressName",
				})
				setTimeout(() => {
					screenComRef.value.checkFun({
						dictLabel: addressInfo.value.district,
						key: "addressName",
					});
				}, 600)
			}else {
				$u.msg('未获取到当前位置')
			}
		}
		queryType.value = option.type;
		loadData();
	})
</script>

<style lang="scss">
	.pos {
		position: relative;
	}

	.search {
		padding: 28rpx 14rpx 24rpx 36rpx;

		.border {
			border: 1px solid #ccc;
		}

		.saveBtn {
			width: 97rpx;
			height: 53rpx;
			margin-left: 10rpx;
			font-size: 20rpx;
		}
	}

	.shai {
		padding: 20rpx 10rpx 14rpx 36rpx;
		height: 40rpx;

		.la {
			position: relative;
			top: -4rpx;
		}

		.label-item {
			padding: 6rpx 14rpx;
			background: #F5F5F5;
			border-radius: 14rpx;
			margin-left: 10rpx;
			margin-bottom: 10rpx;
			white-space: nowrap;
		}

		.tool {
			position: relative;
			top: -4rpx;

			.tool-text {
				position: relative;
				padding: 6rpx 15rpx;

				&:last-child::before {
					content: "";
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 1px;
					height: 24rpx;
					background: #D50000;
				}
			}
		}
	}

	.list {
		padding: 0 36rpx;
		margin-top: 10rpx;
	}
</style>